<template>
    <div class="common-layout">
        <el-container>
            <el-header>
        <span class="icon">
          <el-icon :size="35">
            <shop/>
          </el-icon>
        </span>
                <span class="title">Spring SongXuan.com</span>
            </el-header>
            <el-main>
                <el-card class="sign_in_card">
                    <el-from :model="form" label-width="80px">
                        <el-form-item label="">
                            <el-input v-model="form.username" placeholder="username"/>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input type="password" v-model="form.password" placeholder="password"/>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input type="text" v-model="form.age" placeholder="age"/>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input type="text" v-model="form.phone" placeholder="phone"/>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input type="date" v-model="form.birthday" placeholder="birthday"/>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input type="email" v-model="form.email" placeholder="email"/>
                        </el-form-item>
                        <el-from-item>
                            <el-button type="primary" @click="onSubmit()">sign in</el-button>
                        </el-from-item>
                    </el-from>
                </el-card>
            </el-main>
            <el-footer>&copy; 2023 by SongXuan<sup>&reg;</sup></el-footer>
        </el-container>
    </div>
</template>

<script setup>
import {reactive} from "vue";
import axios from 'axios'
import {ElMessage} from "element-plus";
import router from "../router/index.js";
//获取表单的值
const form = reactive({
    account: '',
    password: '',
    age:'',
    phone:'',
    birthday:'',
    email:''
})
const onSubmit = () => {
    console.log(form);
    axios.post('http://localhost:8080/user/create', form).then(res => {
        console.log(res.data);
        if (res.data){
            alert("注册成功");
        }else {
            ElMessage.error("error");
        }
            }).catch(error => {
        console.log(error)
    })
}


</script>

<style scoped>
.common-layout {
    height: 100vh; /* vh: viewport height */
}

.el-header {
    height: 60px;
    background: rgba(33, 33, 33, .8);
    color: #f9f9f9;
}

.el-container {
    background: url(../assets/img/bg.jpeg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.el-container.is-vertical {
    height: 100%;
}

.el-icon {
    color: orangered;
}

.icon {
    display: inline-block; /* inline-block 行内块级*/
    vertical-align: middle; /* 垂直方向居中对齐*/
}

.title {
    margin-left: 10px;
    font-size: 25px;
    font-weight: bolder;
    line-height: 60px; /* 行高 行高等于父级容器的高度 将在父级容器中垂直居中 */
}

.sign_in_card {
    margin: 80px 100px;
    width: 25%;
    border-radius: 10px;
    opacity: .8
}

.el-footer {
    color: #f9f9f9;
    height: 100px;
    line-height: 100px;
    text-align: center; /* 文本水平居中 */
    background: rgba(33, 33, 33, .8);
}
</style>